<div class="panel panel-default" ng-repeat="category in ctrl.categories">
  <div class="panel-heading">
    {{category.name}}
    <span class="pull-right">
      <span class="btn-group">
        <a href="" class="btn btn-xs btn-default" ui-sref="^.editcategory({id: category.id})" title="Edit category">
          <i class="fa fa-pencil"></i>
        </a>
        <a href="" class="btn btn-xs btn-default" ui-sref="^.deletecategory({categoryId: category.id})"
           title="Delete category">
          <i class="fa fa-trash-o"></i>
        </a>
        <a href="" class="btn btn-xs btn-default" ui-sref="^.addcategory()" title="Add category">
          <i class="fa fa-plus"></i>
        </a>
      </span>
      <span class="btn-group">
      <a href="" class="btn btn-xs btn-success" ui-sref="^.add({categoryId: category.id})" title="Add product">
        <i class="fa fa-plus"></i>
      </a>
      </span>
    </span>
  </div>

  <table class="table table-bordered" ng-show="category.products.length">
    <tbody>
    <tr ng-repeat="product in category.products">
      <th>
        <a href="" ui-sref="^.view({productId: product.id})">{{product.name}}</a>
        <small>{{product.description}}</small>
        <div class="pull-right">
          <span class="label label-default">{{product.price}}</span>
          <a href="" class="btn btn-xs btn-default" ui-sref="^.edit({productId: product.id})">
            <i class="fa fa-pencil"></i>
          </a>
          <a href="" class="btn btn-xs btn-default" ui-sref="^.delete({productId: product.id})">
            <i class="fa fa-trash-o"></i>
          </a>
        </div>
      </th>
    </tr>
    </tbody>
  </table>

  <div class="panel-body" ng-show="!category.products.length">
    <h4 class="list-group-item-heading" translate>
      There are no products in this category!
    </h4>

    <p class="list-group-item-text" translate>
      Click <a href="" ui-sref="^.add({ categoryId: category.id })">here</a> to add one!
    </p>
  </div>
</div>


<div class="panel panel-default" ng-show="!ctrl.categories.length">
  <div class="panel-body">
    <h4 class="list-group-item-heading" translate>
      There are no categories
    </h4>

    <p class="list-group-item-text" translate>Click <a href="" ui-sref="^.addcategory()">here</a> to add one!</p>
  </div>
</div>
